<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>商品管理</h2>
        </div>
      </div>
      <div class="normal-box-bd">
        <div class="normal-list-page-mod">
          <div class="mb-2">
            <Button-group>
              <Button custom-icon="iconfont icon-shanchusekuai"
                      size="small"
                      type="error"
                      @click="batchDel">
                删除
              </Button>
              <Button custom-icon="iconfont icon-fangkuai2"
                      size="small"
                      type="primary"
                      @click="showCreateModal">
                新建
              </Button>
              <Button custom-icon="iconfont icon-yunduanxiazai"
                      size="small"
                      type="success"
                      @click="exportExcel">
                导出
              </Button>
            </Button-group>
          </div>
          <div class="normal-list-page-bd">
            <Table border
                   ref="table"
                   :loading="list.loading"
                   :columns="list.columns"
                   :data="list.tableData"
                   @on-selection-change="selectionChange">
              <template slot-scope="{ row }"
                        slot="auditStatus">
                {{row.auditStatus?'通过':'未通过'}}
              </template>
              <template slot-scope="{ row }"
                        slot="publishStatus">
                {{row.publishStatus?'上架':'下架'}}
              </template>
               <template slot-scope="{ row }"
                        slot="desc">
                 <Button type="primary" size="small" @click="openDesc(row.descript)">查看</Button>
              </template>
            </Table>
          </div>
          <div class="normal-list-page-ft clearfix">
            <Page class="fr"
                  :total="queryData.totalRecord"
                  :page-size="queryData.pageSize"
                  :current="queryData.page"
                  @on-change="changePage"
                  @on-page-size-change="onPageSizeChange"
                  show-elevator
                  show-total
                  show-sizer></Page>
          </div>
        </div>

        <!--新建&修改-->
        <Modal v-model="modal.mallProductInfo.isShow"
               :loading="modal.mallProductInfo.loading"
               :mask-closable="false"
               width="800px"
               :title="modal.mallProductInfo.title"
               @on-ok="postData">
          <Form ref="systemFrom"
                :model="modal.mallProductInfo.formData"
                :rules="modal.mallProductInfo.rules"
                :label-width="120">
            <FormItem label="商品名称"
                      prop="productName">
              <Input placeholder="请输入商品名称"
                     v-model="modal.mallProductInfo.formData.productName"
                     style="width:300px;" />
            </FormItem>
            <FormItem label="分类ID"
                      prop="categoryId">
              <Select v-model="modal.mallProductInfo.formData.pid"
                      @on-change="getCategory2()"
                      clearable
                      style="width:200px">
                <Option v-for="item in List.categoryList1"
                        :value="item.id"
                        :key="item.id">{{ item.name }}</Option>
              </Select>
              <Select v-model="modal.mallProductInfo.formData.categoryId"
                      clearable
                      style="width:200px">
                <Option v-for="item in List.categoryList2"
                        :value="item.id"
                        :key="item.id">{{ item.name }}</Option>
              </Select>
            </FormItem>
            <!-- <FormItem label="生产日期"  prop="productionDate">
                            <DatePicker type="date" format="yyyy-MM-dd HH:mm:ss" @on-change="modal.mallProductInfo.formData.productionDate=$event" v-model="modal.mallProductInfo.formData.productionDate"  placeholder="请填写生产日期" style="width: 200px"></DatePicker>
                        </FormItem> -->
            <FormItem label="条形码"
                      prop="productCore">
              <Input placeholder="请输入商品条形码"
                     v-model="modal.mallProductInfo.formData.productCore"
                     style="width:300px;" />
            </FormItem>
            <FormItem label="商品销售价格"
                      prop="price">
              <Input placeholder="请输入商品销售价格"
                     v-model="modal.mallProductInfo.formData.price"
                     style="width:300px;" />
            </FormItem>
            <FormItem label="商品重量"
                      prop="weight">
              <Input placeholder="请输入商品重量"
                     v-model="modal.mallProductInfo.formData.weight"
                     style="width:300px;" />
            </FormItem>
            <!-- <FormItem label="商品长度"  prop="length">
                            <Input placeholder="请输入商品长度" v-model="modal.mallProductInfo.formData.length" style="width:300px;"/>
                        </FormItem>
                        <FormItem label="商品高度"  prop="height">
                            <Input placeholder="请输入商品高度" v-model="modal.mallProductInfo.formData.height" style="width:300px;"/>
                        </FormItem>
                        <FormItem label="商品宽度"  prop="width">
                            <Input placeholder="请输入商品宽度" v-model="modal.mallProductInfo.formData.width" style="width:300px;"/>
                        </FormItem> -->
            <FormItem label="宝贝主图："
                      prop="picUrl">
              <upload-image v-if="modal.mallProductInfo.isShow"
                            ref="upload"
                            :uploadList.sync="modal.mallProductInfo.formData.uploadList1"
                            @imageupload="mainImg"
                            imgSize="1"></upload-image>
            </FormItem>
            <FormItem label="宝贝副图："
                      prop="img">
              <upload-image v-if="modal.mallProductInfo.isShow"
                            ref="upload2"
                            :uploadList.sync="modal.mallProductInfo.formData.uploadList2"
                            @imageupload="calcImg"></upload-image>
            </FormItem>
            <FormItem label="商品描述"
                      prop="descript">
              <wang-editor v-if="modal.mallProductInfo.isShow"
                           :value="modal.mallProductInfo.formData.descript"
                           @change="(v)=>{modal.mallProductInfo.formData.descript=v}"></wang-editor>
            </FormItem>
            <FormItem label="审核状态："
                      prop="auditStatus">
              <RadioGroup v-model="modal.mallProductInfo.formData.auditStatus">
                <Radio :label="true">已审核</Radio>
                <Radio :label="false">未审核</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="商品状态："
                      prop="publishStatus">
              <RadioGroup v-model="modal.mallProductInfo.formData.publishStatus">
                <Radio :label="true">上架</Radio>
                <Radio :label="false">下架</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="库存"
                      prop="warehouse">
              <Input placeholder="请输入库存"
                     v-model="modal.mallProductInfo.formData.warehouse"
                     style="width:300px;" />
            </FormItem>
            <!--<FormItem label="销量"  prop="warehouse">-->
            <!--<Input placeholder="请输入销量" v-model="modal.mallProductInfo.formData.sales" style="width:300px;"/>-->
            <!--</FormItem>-->
            <FormItem label="是否热门"
                      prop="enabled">
              <i-switch :size="large"
                        v-model="modal.mallProductInfo.formData.isHot"
                        :value="modal.mallProductInfo.formData.isHot">
                <span slot="open">是</span>
                <span slot="close">否</span>
              </i-switch>
            </FormItem>
          </Form>
        </Modal>

        <!-- 分配库存 -->
        <Modal v-model="assign.ass_mode"
               title="库存分配"
               :loading="assign.loading"
               @on-ok="assignSend">
          <Form ref="check"
                :model="assign.data"
                :label-width="82">
            <FormItem label="库存数量"
                      prop="count"
                      :rules="assign.rules.count">
              <Input placeholder="请输入要分配的库存数量"
                     v-model="assign.data.count"
                     style="width:300px;" />
            </FormItem>
            <FormItem label="选择管理员"
                      prop="adminId"
                      :rules="assign.rules.adminId">
              <Select v-model="assign.data.adminId"
                      style="width:300px;">
                <Option v-for="item of adminList"
                        :key="item"
                        :value="String(item.id)">{{item.name}}</Option>
              </Select>
            </FormItem>
          </Form>
        </Modal>
        <!-- 查看详情 -->
        <Modal v-model="showDesc"
               title="详情"
               width="600px">
           <div style="max-width:100%" v-html="descHtml"></div>
        </Modal>
      </div>
    </div>
  </div>
</template>

<script>
import MallProductInfoApi from '@/api/mall/MallProductInfo.js'
import MallCategoryApi from '@/api/mall/MallCategory.js'
import $api from '@/api/base_sys/gcDispenser.js'
import { Message } from 'iview'
import WangEditor from '@/components/Editor/WangEditor.vue'
import Uploadoss from '@/components/uploadoss'
import uploadImage from '@/components/upload-image/upload-image'
import global from '@/assets/js/global'
import axios from 'axios'
export default {
  name: 'mallProductInfo',
  components: {
    WangEditor,
    Uploadoss,
    uploadImage
  },
  data () {
    return {
      // 弹出层数据
      modal: {
        mallProductInfo: {
          isShow: false,
          loading: true,
          width: 400,
          type: 'create', // create 新建，update 修改
          title: '新建',
          rules: {
            // check
            productName: [
              {
                required: true,
                message: '请输入商品名称',
                trigger: ['blur', 'change']
              }
            ],
            categoryId: [
              {
                type: 'number',
                required: true,
                message: '请选择商品分类',
                trigger: 'change'
              }
            ],
            auditStatus: [
              {
                type: 'boolean',
                required: true,
                message: '请选择审核状态',
                trigger: 'change'
              }
            ],
            publishStatus: [
              {
                type: 'boolean',
                required: true,
                message: '请选择商品状态',
                trigger: 'change'
              }
            ],
            picUrl: [
              { required: true, message: '请上传宝贝主图', trigger: 'change' }
            ],
            productCore: [
              {
                required: true,
                message: '请输入商品条形码',
                trigger: ['blur', 'change']
              },
              {
                type: 'number',
                trigger: ['blur', 'change'],
                message: '请输入正确的数字',
                transform (value) {
                  return Number(value)
                }
              }
            ],
            price: [
              {
                required: true,
                message: '请输入商品价格',
                trigger: ['blur', 'change']
              },
              {
                type: 'number',
                trigger: ['blur', 'change'],
                message: '请输入正确的数字',
                transform (value) {
                  return Number(value)
                }
              }
            ],
            warehouse: [
              {
                required: true,
                message: '请输入库存数量',
                trigger: ['blur', 'change']
              },
              {
                type: 'integer',
                trigger: ['blur', 'change'],
                message: '请输入正确的整数',
                transform (value) {
                  return Number(value)
                }
              }
            ]
          },
          formData: {}
        }
      },
      // 列表
      list: {
        loading: false,
        selections: [],

        // 列表展示数据
        tableData: [],
        // 表格表头
        columns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          /** 开始自动生成 */
          { title: '商品ID', key: 'id', width: 80, align: 'center' },
          {
            title: '商品主图',
            key: 'picUrl',
            width: 200,
            align: 'center',

            render: (h, params) => {
              return h('img', {
                attrs: { src: params.row.picUrl },
                style: { width: '90%', height: '90%' }
              })
            }
          },
          { title: '商品名称', key: 'productName', minWidth: 85, align: 'center' },
          { title: '分类ID', key: 'categoryId', minWidth: 100, align: 'center' },
          { title: '商品价格', key: 'price', minWidth: 50, align: 'center' },
          {
            title: '详情',
            align: 'center',
            minWidth: 100,
            fixed: 'right',
            slot: 'desc'
          },
          { title: '审核状态', key: 'auditStatus', slot: 'auditStatus', minWidth: 50, align: 'center' },
          { title: '上架状态', key: 'publishStatus', slot: 'publishStatus', minWidth: 50, align: 'center' },
          { title: '库存', key: 'warehouse', minWidth: 50, align: 'center' },
          { title: '销量', key: 'sales', minWidth: 50, align: 'center' },
          {
            title: '是否热门',
            key: 'action',
            align: 'center',
            minWidth: 100,
            render: (h, params) => {
              return h('div', [
                h('i-switch', {
                  props: {
                    value: params.row.isHot
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    'on-change': (value) => {
                      this.switch(params.row, value)
                    }
                  }
                })
              ])
            }
          },
          { title: '商品录入时间', key: 'createTime', minWidth: 110, align: 'center' },
          /** 自动生成结束 */
          {
            title: '操作',
            align: 'center',
            minWidth: 150,
            fixed: 'right',
            render: (h, params) => {
              return h('div', { class: 'action-group' }, [
                h(
                  'Tooltip',
                  {
                    props: { placement: 'top', content: '分配库存' },
                    style: { cursor: 'pointer' }
                  },
                  [
                    h(
                      'Button',
                      {
                        props: { type: 'success', size: 'small' },
                        style: { marginRight: '5px', padding: '1px 2px' },
                        on: {
                          click: () => {
                            this.assignOpen(params.row.id)
                          }
                        }
                      },
                      [h('Icon', { props: { type: 'ios-cube', size: 18 } })]
                    )
                  ]
                ),
                h(
                  'Tooltip',
                  {
                    props: { placement: 'top', content: '编辑' },
                    style: { cursor: 'pointer' }
                  },
                  [
                    h(
                      'Button',
                      {
                        props: { type: 'primary', size: 'small' },
                        style: { marginRight: '5px', padding: '1px 2px' },
                        on: {
                          click: () => {
                            this.showUpdateModal(params.row.id)
                          }
                        }
                      },
                      [
                        h('Icon', {
                          props: {
                            type: ' iconfont icon-bianjisekuai',
                            size: 18
                          }
                        })
                      ]
                    )
                  ]
                ),

                h(
                  'Tooltip',
                  {
                    props: { placement: 'top', content: '删除' },
                    style: { cursor: 'pointer' }
                  },
                  [
                    h(
                      'Button',
                      {
                        props: { type: 'error', size: 'small' },
                        style: { marginRight: '5px', padding: '1px 2px' },
                        on: {
                          click: () => {
                            this.delData([params.row.id])
                          }
                        }
                      },
                      [
                        h('Icon', {
                          props: {
                            type: ' iconfont icon-shanchusekuai',
                            size: 18
                          }
                        })
                      ]
                    )
                  ]
                )
              ])
            }
          }
        ]
      },
      List: {
        categoryList1: [],
        categoryList2: []
      },

      // 分配库存数据
      assign: {
        ass_mode: false, // 弹窗
        loading: false, // 加载态
        rules: {
          // check
          count: [
            { required: true, message: '请输入库存数量', trigger: 'blur' },
            {
              type: 'number',
              trigger: 'blur',
              message: '请输入正确的分值',
              transform (value) {
                return Number(value)
              }
            }
          ],
          adminId: [
            { required: true, message: '请选择管理员', trigger: 'blur' }
          ]
        },
        data: {
          productId: '', // 商品id
          adminId: '', // 管理员id
          count: '' // 库存数量
        }
      },
      adminList: [], // 管理员列表
      // 页面查询数据
      queryData: {
        limit: 10,
        page: 1,
        totalRecord: 0,
        name: ''
      },
      showDesc: false,
      descHtml: ''
    }
  },
  methods: {
    // 获取列表
    getTableData () {
      const that = this
      MallProductInfoApi.getPageList(that.queryData)
        .then((res) => {
          console.log(111)
          console.log(res.data.list)
          that.list.tableData = res.data.list
          that.queryData.totalRecord = res.data.totalRecord
          that.queryData.page = res.data.pageNum
          that.queryData.limit = res.data.pageSize
        })
        .catch((error) => {
          Message.error(error)
        })
    },

    // 新建&修改
    postData () {
      const that = this
      that.$refs['systemFrom'].validate((valid) => {
        if (valid) {
          if (!that.modal.mallProductInfo.formData.id) {
            // 新建
            MallProductInfoApi.add(that.modal.mallProductInfo.formData)
              .then((res) => {
                that.modal.mallProductInfo.isShow = false
                that.modal.mallProductInfo.loading = false
                if (!res.code) {
                  that.getTableData()
                  that.$Notice.success({
                    title: '保存成功!'
                  })
                } else {
                  that.$Notice.error({
                    title: res.message
                  })
                }
              })
              .catch((error) => {
                Message.error(error)
              })
          } else {
            // 修改
            that.modal.mallProductInfo.formData.productionDate = global.time(
              that.modal.mallProductInfo.formData.productionDate
            )
            MallProductInfoApi.update(
              that.modal.mallProductInfo.formData.id,
              that.modal.mallProductInfo.formData
            )
              .then((res) => {
                that.modal.mallProductInfo.isShow = false
                that.modal.mallProductInfo.loading = false
                if (!res.code) {
                  that.getTableData()
                  that.$Notice.success({
                    title: '保存成功!'
                  })
                } else {
                  that.$Notice.error({
                    title: res.message
                  })
                }
              })
              .catch((error) => {
                Message.error(error)
              })
          }
        } else {
          that.modal.mallProductInfo.loading = false
          that.$nextTick(() => {
            that.modal.mallProductInfo.loading = true
          })
        }
      })
    },

    // 删除
    delData (ids) {
      if (!ids.length) {
        return
      }
      this.$Modal.confirm({
        title: '确认删除',
        content:
          '<p>您确认删除id为 <strong>' +
          ids.toString() +
          '</strong> 的记录吗?</p><p>删除后将无法撤销，请谨慎操作！</p>',
        loading: true,
        onOk: () => {
          MallProductInfoApi.del({
            ids: ids
          }).then((res) => {
            this.$Modal.remove()
            if (!res.code) {
              this.$Notice.success({
                title: '删除成功'
              })
              this.queryData.page = 1
              this.getTableData()
            } else {
              this.$Notice.error({
                title: res.message
              })
            }
          })
        }
      })
    },

    // 排量删除
    batchDel () {
      let ids = []
      this.list.selections.forEach((element) => {
        ids.push(element.id)
      })
      if (!ids.length) {
        this.$Message.error({
          content: '请先选择要删除的项！',
          duration: 3
        })
      }
      this.delData(ids)
    },
    // 导出
    exportExcel () {
      axios({
        url: '/api/mallProductInfo/exportExcel',
        method: 'get',
        responseType: 'blob'
      })
        .then((res) => {
          const content = res.data
          const blob = new Blob([content])
          const fileName = '商品列表.xls'
          if ('download' in document.createElement('a')) {
            // 非IE下载
            const elink = document.createElement('a')
            elink.download = fileName
            elink.style.display = 'none'
            elink.href = URL.createObjectURL(blob)
            document.body.appendChild(elink)
            elink.click()
            URL.revokeObjectURL(elink.href) // 释放URL 对象
            document.body.removeChild(elink)
          } else {
            // IE10+下载
            navigator.msSaveBlob(blob, fileName)
          }
        })
    },
    // 获取管理员列表
    async getAdminlist () {
      let r = await $api.getData('/api/mallAdmin/all')
      console.log('管理员', r.data)
      this.adminList = r.data
    },
    // 分配库存弹窗
    assignOpen (id) {
      console.log(id)
      this.assign.ass_mode = true
      this.assign.data.productId = id
      this.$refs['check'].resetFields()
    },
    // 分配提交
    assignSend () {
      this.$refs['check'].validate(async (valid) => {
        if (!valid) {
          this.changeLoading()
          console.log('no')
          return
        }
        console.log('ok')
        let r = await $api.add('/api/mallAdminProduct', this.assign.data)
        let message = r.message
        console.log(123, r)
        if (r.data) {
          this.$Message.success('操作成功')
          this.assign.ass_mode = false
          return
        }
        this.$Message.error(message)
      })
    },
    // 改变load状态
    changeLoading () {
      this.assign.loading = false
      this.$nextTick(() => {
        this.assign.loading = true
        this.assign.ass_mode = true
      })
    },
    // 全选，不全选
    selectionChange (args) {
      this.list.selections = args
    },

    // 每页显示记录数变更
    onPageSizeChange (pageSize) {
      this.queryData.limit = pageSize
      this.getTableData()
    },
    // 换页
    changePage (page) {
      this.queryData.page = page
      this.getTableData()
    },

    // 显示新建弹窗
    showCreateModal () {
      this.getCategory()
      this.$refs.systemFrom.resetFields()
      // this.modal.mallProductInfo.formData.imgList = [];
      // this.modal.mallProductInfo.formData.imgList2 = [];
      this.modal.mallProductInfo.type = 'create'
      this.modal.mallProductInfo.title = '新建'
      this.modal.mallProductInfo.formData = {}
      this.modal.mallProductInfo.isShow = true
    },
    getCategory () {
      const that = this
      MallCategoryApi.getCategoryPid(0)
        .then((res) => {
          if (res.data.length === 0) {
            that.List.categoryList1 = []
            this.$refs.resetSelect.clearSingleSelect()
            that.flog = true
          } else if (res.data.length === 1) {
            that.flog = false
            that.modal.mallProductInfo.formData.categoryId = res.data[0].id
            that.List.categoryList1 = res.data
          } else {
            that.flog = true
            that.List.categoryList1 = res.data
          }
        })
        .catch((error) => {
          Message.error(error)
        })
    },
    getCategory2 () {
      const that = this
      if (this.modal.mallProductInfo.formData.pid == null) return
      MallCategoryApi.getCategoryPid(this.modal.mallProductInfo.formData.pid)
        .then((res) => {
          if (res.data.length === 0) {
            that.List.categoryList2 = []
            this.$refs.resetSelect.clearSingleSelect()
            that.flog = true
          } else if (res.data.length === 1) {
            that.flog = false
            that.modal.mallProductInfo.formData.categoryId = res.data[0].id
            that.List.categoryList2 = res.data
          } else {
            that.flog = true
            that.List.categoryList2 = res.data
          }
        })
        .catch((error) => {
          Message.error(error)
        })
    },
    // 图片的校验
    mainImg () {
    //   console.log('v', this.modal.mallProductInfo.formData.uploadList1)
      let imgUrl = this.modal.mallProductInfo.formData.uploadList1.map((v) => {
        if (v.length < 1) return v
        if (v.response.res.requestUrls[0].indexOf('?') > -1) {
          v = v.response.res.requestUrls[0].split('?')[0]
          return v
        } else {
          v = v.response.res.requestUrls[0]
          return v
        }
      })
      this.modal.mallProductInfo.formData.uploadList1.forEach((v) => {
        if (v.response.res.requestUrls[0].indexOf('?') > -1) {
          v.response.res.requestUrls[0] = v.response.res.requestUrls[0].split('?')[0]
        }
      })
      // 手动去除原图保护
      this.modal.mallProductInfo.formData.picUrl = imgUrl[0]
      console.log('picUrl', this.modal.mallProductInfo.formData.uploadList1)
    },
    // 图片的校验
    calcImg () {
      this.modal.mallProductInfo.formData.imgList =
        this.modal.mallProductInfo.formData.uploadList2.map((v) => {
          if (v.length < 1) return v
          v = v.response.res.requestUrls[0]
          console.log(v)
          return v
        })
        // 手动去除原图保护
      this.modal.mallProductInfo.formData.uploadList2.forEach((v) => {
        if (v.response.res.requestUrls[0].indexOf('?') > -1) {
          v.response.res.requestUrls[0] = v.response.res.requestUrls[0].split('?')[0]
        }
      })
    },
    // 显示修改弹窗
    showUpdateModal (id) {
      this.$refs.systemFrom.resetFields()
      this.modal.mallProductInfo.type = 'update'
      this.modal.mallProductInfo.title = '修改'
      // this.modal.mallProductInfo.formData = {};
      const that = this

      MallProductInfoApi.getDetail(id)
        .then((res) => {
          console.log(res.data)
          res.data.price = String(res.data.price)
          res.data.productCore = String(res.data.productCore)
          res.data.warehouse = String(res.data.warehouse)
          that.modal.mallProductInfo.formData = res.data
          that.modal.mallProductInfo.formData.pid = parseInt(
            that.modal.mallProductInfo.formData.categoryId / 100
          )
          that.getCategory()
          that.getCategory2(
            parseInt(that.modal.mallProductInfo.formData.categoryId / 100)
          )
          let item = {
            status: 'finished',
            response: {
              res: {
                requestUrls: []
              }
            }
          }
          item.response.res.requestUrls.push(
            that.modal.mallProductInfo.formData.picUrl
          )
          that.modal.mallProductInfo.formData.uploadList1 = []
          that.modal.mallProductInfo.formData.uploadList2 = []
          that.modal.mallProductInfo.formData.uploadList1.push(item)

          for (let img of that.modal.mallProductInfo.formData.imgList) {
            let item = {
              status: 'finished',
              response: {
                res: {
                  requestUrls: [img]
                }
              }
            }
            that.modal.mallProductInfo.formData.uploadList2.push(item)
          }
        })
        .catch((error) => {
          Message.error(error)
        })
      this.modal.mallProductInfo.isShow = true
    },
    // 修改是否 热门
    switch (data, vlaue) {
      data.isHot = vlaue
      MallProductInfoApi.update(data.id, data)
        .then((res) => {})
        .catch((error) => {
          Message.error(error)
        })
    },
    openDesc (val) {
      this.descHtml = val
      this.showDesc = true
    }
  },

  created () {
    this.getTableData()
    this.getAdminlist()
  }
}
</script>
<style lang="less">
body /deep/ .ivu-select-dropdown {
  z-index: 99999999 !important;
}
</style>
